<template>
    <div class="jingxuan">
        <!--        查询评价-->
        <span class="from">
            <el-form :inline="true" :model="context" class="demo-form-inline">
            <el-form-item label="用户评价内容:">
                <el-input v-model="context.name"></el-input>
            </el-form-item>
                <!--                //日期-->
                <!--<el-date-picker
                        v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>-->
                <!--                //搜索日期-->
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        </span>
        <!--        新增评价-->
        <div style="margin-bottom: 30px">
            <el-button type="text" @click="resetData" :style="{'background-color':'#409EFF',color:'#fff',textAlign:'center',width:'100px',padding:'10px 0'}">
                <span>新增评价</span>
            </el-button>
            <!--            新增评价-->
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="评价内容" :label-width="formLabelWidth">
                        <el-input v-model="form.userMarkText" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="评价等级" :label-width="formLabelWidth">
                        <el-input v-model="form.userMarkStar" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="咨询师" :label-width="formLabelWidth">
                        <template>
                            <el-select autocomplete="off" v-model="teacherValue" placeholder="请选择">
                                <el-option
                                        v-for="item in teachers"
                                        :key="item.id"
                                        :label="item.name+'('+item.intro+')'"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </template>

                        <!--                        <el-input v-model="form.teacher_id" autocomplete="off"></el-input>-->
                    </el-form-item>

                    <el-form-item label="用户" :label-width="formLabelWidth">
                        <template>
                            <el-select autocomplete="off" v-model="userValue" placeholder="请选择">
                                <el-option
                                        v-for="item in users"
                                        :key="item.id"
                                        :label="item.username"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </template>
                        <!--                        <el-input v-model="form.type_id" autocomplete="off"></el-input>-->
                    </el-form-item>

                </el-form>
                <!-------------------------------------------------------------------------------------------------->
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveDate">保 存</el-button>
                </div>
                <!--                ---------------------------------------------------------------------------------->
            </el-dialog>
        </div>

        <!--        文章列表展示-->
        <template>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    :header-cell-style="{'background-color':'#409EFF',color:'#fff',textAlign:'center'}"
                    :cell-style="{'text-align':'center'}">

                <el-table-column
                        prop="id"
                        label="ID">
                </el-table-column>
                <el-table-column
                        prop="markText"
                        label="评价内容">
                </el-table-column>
                <el-table-column
                        prop="markstar"
                        label="评价等级">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="评价时间">
                </el-table-column>
                <el-table-column
                        prop="teacherName"
                        label="咨询师">
                </el-table-column>
                <el-table-column
                        prop="userName"
                        label="用户">
                </el-table-column>

                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.$index)" type="text" size="small">编辑</el-button>
                        <el-button
                                @click.native.prevent="deleteRow(scope.$index)"
                                type="text"
                                size="small">
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <!--        删除操作-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <span>此操作将永久删除该文件是否继续</span>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="deleteData">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "CourseEvaluation",
        data(){
            return{
                //搜索所运用的属性
                value1: '',
                context: {
                    name: '',
                    region: ''
                },
                form:{
                    userMarkId:'',
                    userMarkText:'',
                    userMarkStar:'',
                    userMarkCreateTime:'',
                    userMarkTeacherId:'',
                    userMarkUserId:'',
                },
                tableData: [],
                teachers:[],
                users:[],
                dialogFormVisible: false,
                dialogTableVisible: false,
                dialogTableVisible2:false,
                dialogVisible: false,
                formLabelWidth: '120px',
                title:'',
                state:'',
                teacherValue:'',
                teacherValuec:'',
                userValue:'',
                userValuec:''
            }
        },
        created() {
            this.refresh();
            this.getTeacher();
            this.getUser();
        },
        methods:{
            //获取时间
            getDateString(date){
                let yy = date.getFullYear();
                let mm = date.getMonth()+1;
                let dd = date.getDate();
                let hh = date.getHours();
                let mf = date.getMinutes()<10 ? '0'+date.getMinutes() : date.getMinutes();
                let ss = date.getSeconds()<10 ? '0'+date.getSeconds() : date.getSeconds();
                let str = yy + "-" + mm + "-" + dd +" " + hh + ":" + mf + ":" + ss;
                return str;
            },
            //查找文章
            onSubmit(){
                this.axios.get("/usermark/getLikeUserMark",{
                    params:{
                        message:this.context.name
                    }
                }).then(res=>{
                    console.log(res)
                    this.tableData = res.data.data
                })
            },
            //获取所有文章列表
            refresh(){
                this.axios.get("/usermark/getUserMarkTeacher").then(res=>{
                    console.log(res);
                    this.tableData = res.data.data;
                })
            },
            //获取所有教师列表
            getTeacher(){
                this.axios.get("/teacherSearch/findAllTeacher").then(res=>{
                    console.log(res);
                    this.teachers = res.data.data
                })
            },
            //获取所有用户列表
            getUser(){
                this.axios.get("/userbfb/getAllNUser").then(res=>{
                    console.log(res)
                    this.users = res.data.data
                })
            },
            //新增数据刷新
            resetData(){
                this.title = '新增评价';
                this.state = 1;
                this.dialogFormVisible = true;
                this.form.userMarkId = '';
                this.form.userMarkText = '';
                this.form.userMarkStar = '';
                this.form.userMarkCreateTime = '';
                this.form.userMarkTeacherId = '';
                this.form.userMarkUserId = '';
            },
            //新增数据
            insertData(){
                this.axios.post("/usermark/insertUserMark",{
                    marktext:this.form.userMarkText,
                    markstar:this.form.userMarkStar,
                    teacherId:this.teacherValue,
                    userId:this.userValue,
                }).then(res=>{
                    console.log(res)
                })
            },
            //保存数据
            saveDate(){
                if (this.state === 1){
                    this.insertData();
                    setTimeout(()=>{this.refresh()},500);
                }
                if (this.state === 2){
                    this.updateDate();
                    setTimeout(()=>{this.refresh()},500);
                }
                this.dialogFormVisible = false;

            },
            //修改数据显示
            handleClick(index) {
                this.title = '编辑评价';
                this.state = 2;
                console.log(index);
                this.dialogFormVisible = true;
                console.log(this.tableData);
                this.form.userMarkId = this.tableData[index].id;
                this.form.userMarkText = this.tableData[index].markText;
                this.form.userMarkStar = this.tableData[index].markstar;
                this.form.userMarkCreateTime = this.tableData[index].createTime;
                this.form.userMarkTeacherId = this.teacherValue;
                this.form.userMarkUserId = this.userValue;
            },
            //修改数据
            updateDate(){
                this.axios.post("/usermark/updateUserMark",{
                    id:this.form.userMarkId,
                    markText:this.form.userMarkText,
                    markStar:this.form.userMarkStar,
                    teacherId:this.teacherValue,
                    userId:this.userValue,
                }).then(res=>{
                    console.log(res)
                    setTimeout(()=>{this.refresh()},500);
                })
            },
            //删除数据
            deleteRow(index){
                this.dialogVisible = true;
                this.form.userMarkId = this.tableData[index].id;
                console.log(this.form.articleId);
            },
            deleteData(){
                this.dialogVisible = false;
                this.axios.post("/usermark/deleteUserMark",{
                        id:this.form.userMarkId
                }
                ).then(res=>{
                    console.log(res)
                    setTimeout(()=>{this.refresh()},500)
                })
            }
        }
    }
</script>

<style scoped>

</style>